import React from 'react'
import {Modal,Form, Input, message,Select} from 'antd'
import{SmileOutlined} from '@ant-design/icons';
//引入connect用于连接UI组件与redux
import currentDate from '../../../common/CurrentDate.js'
import {connect} from 'react-redux'
import { updateRoleActionAsync,LoadRoleActionAsync } from '../../../redux/action/roleAction';
const { Option } = Select;
function UpdateRole(props) {
  const [params,setParams] = React.useState({})
  const handleParams=()=>{
    props.roleList.map((val,i)=>{
      if(val.key===props.selectedRowKey[0])
      {
        RoleUpdateForm.setFieldsValue(val)
        setParams({submitTime:currentDate(),key:val.key})
      }
      return null
    })
  }
  const [RoleUpdateForm]=Form.useForm()
  React.useEffect(() => {
    handleParams()
  },[props.selectedRowKey])
  return (
    <div>
      <Modal 
        title="编辑角色信息" 
        visible={props.visible} 
        onOk={async ()=>{
          let fieldsValue = await RoleUpdateForm.validateFields()
          fieldsValue.status=Number(fieldsValue.status)
          fieldsValue = {...fieldsValue,...params}
          props.updateRoleActionAsync(fieldsValue)
          props.close()
          props.LoadRoleActionAsync()
          message.success('修改成功!')
        }} 
        onCancel={props.close}
        okText='确定'
        cancelText='取消'
        >
        <Form  
          layout="horizontal"
          form={RoleUpdateForm}
          name="RoleUpdateForm"
        >
          <Form.Item
            name="name"
            label="角色名"
            rules={[
              {
                pattern:/^.+$/,
                message: '请输入字符!',
              },
              {
                required: true,
                message: '请输入角色名!',
              },
            ]}
          >
            <Input prefix={<SmileOutlined />} placeholder='角色名'/>
          </Form.Item>
          <Form.Item
              name="status"
              label="状态码"
              rules={[
                {
                  required: true,
                },
              ]}
              initialValue={1}
            >
            <Select style={{ width: '30%' }}>
              <Option value={1}>启用</Option>
              <Option value={0}>禁用</Option>
            </Select>
          </Form.Item>
          <Form.Item
              name="des"
              label="描述语"
              rules={[
                {
                  pattern:/^.+$/,
                  message: '请输入字符!',
                },
                {
                  required: true,
                  message: '请输入描述!',
                },
              ]}
            >
              <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    roleList:state.roleList
	}),
	{updateRoleActionAsync,LoadRoleActionAsync}
)(UpdateRole)

